<template>
  <!--  eslint-disable vue/no-deprecated-v-on-native-modifier  -->
  <div id="tab-bar">
    <van-tabbar
      v-model="state.active"
      fixed
      route
      safe-area-inset-bottom
      active-color="#4389f3"
      inactive-color="#9A9A9A"
      :z-index="99"
    >
      <van-tabbar-item
        v-for="(item, index) in state.tabList"
        :key="index"
        :replace="!(item.method === 'push')"
        :to="item.to"
        :icon="item.spIcon && props.showBackTop ? item.spIcon : item.icon"
        @click.native="handleClickItem({ ...item, index })"
      >
        <span>{{ props.showBackTop && item.spIcon ? item.spName : item.name }}</span>
        <template #icon>
          <img
            class="icon-interaction"
            src="@/assets/tabbar/interaction.png"
            v-if="item.icon == 'interaction'"
            alt=""
          />
          <div v-else>
            <div class="icon-active" :class="'icon-' + item.icon + '-active'"></div>
            <div class="icon-default" :class="'icon-' + item.icon"></div>
            <!-- <img class="icon-active" :src="getAssetsFile(item.icon + '-active')" alt="" />
            <img class="icon-default" :src="getAssetsFile(item.icon)" alt="" /> -->
          </div>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import SvgIcon from '@/components/SvgIcon'
import type { ITabBarItem } from './type'

defineOptions({
  name: 'TabBar'
})

interface IState {
  tabList: ITabBarItem[]
  active: string
}

const props = defineProps({
  showBackTop: Boolean
})

const emit = defineEmits(['handleClickItem', 'backTop'])

const state = reactive<IState>({
  tabList: [
    {
      to: '/home',
      name: '首页',
      spName: '顶部',
      icon: 'home',
      spIcon: 'backtop'
    },
    {
      to: '/zone',
      name: '专区',
      icon: 'zone'
    },
    {
      to: '/ai',
      name: '',
      icon: 'interaction',
      method: 'push'
    },
    {
      to: '/contact',
      name: '通讯录',
      icon: 'address'
    },
    {
      to: '/my',
      name: '我的',
      icon: 'my'
    }
  ],
  active: '/index'
})

// 获取assets静态资源
const getAssetsFile = (url: string) => {
  let img = new URL('../../../assets/tabbar/' + url + '.png', import.meta.url)
  return img
}

const handleClickItem = (data: ITabBarItem) => {
  emit('handleClickItem', data)
}
</script>

<style lang="less">
#tab-bar {
  padding-bottom: 50px;
  .van-tabbar {
    height: 60px;
    padding-top: 24px;
    background: url('@/assets/tabbar/bg.png') no-repeat center top;
    background-size: 375px 103px;
    &::after {
      border: none;
    }
  }
  .van-tabbar-item__icon {
    margin-bottom: 4px;
  }
  .van-tabbar-item__text {
    font-size: 10px;
  }

  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  .van-tabbar-item {
    .icon-active {
      display: none;
    }
  }
  .van-tabbar-item--active {
    background: transparent;
    .icon-default {
      display: none;
    }
    .icon-active {
      display: block;
    }
  }
  .icon-interaction {
    width: 47.5px;
    height: 47.5px;
    margin-top: -20px;
    position: relative;
    z-index: 100;
  }
  @arr: home,zone,address,my;
  each(@arr, {
    @num:extract(@arr, @index);
    .icon-@{value},.icon-@{value}-active {
      width: 20px;
      height: 20px;
      background: url("@/assets/tabbar/@{num}.png") no-repeat center center;
      background-size: 20px 20px;
    }
    .icon-@{value}-active {
      background: url("@/assets/tabbar/@{num}-active.png") no-repeat center center;
      background-size: 20px 20px;
    }
});
}
</style>
